<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="js/ks/css/css2.css" />
<script type="text/javascript" src="js/ks/jquery.js"></script>


<script src="js/day.js"></script>
</head>
<body>
<div id="app">
<div class="header">
  <div class="topbox">
  	<div class="logo">开考时间：{{showCreateTime}}  &nbsp;剩余时间：{{showHowlong}}</div>
  	<div class="topr">&nbsp;总分<b>{{score}}</b></div>
    <div class="toprt"><span>考试名称：</span>{{name}}<br><span>考生姓名：</span>{{userName}}</span></div>
    <div class="clear"></div>
  </div>
</div>
<div class="mainer">
  <div class="mainbox">
    <div class="ilist" v-for="(topic,index) in list">
      <div class="tit">{{(index+1)+"&nbsp;&nbsp;"+topic.text}}<span v-if="topic.score!=null&&topic.score!=''">（{{topic.score}}分）</span></div>
      <div class="item">
        <div :class="'f ' + (topic.questionType==1?'radio':'checkbox')">
        	
          <label v-if="topic.questionType==1" @click.self="selectOne($event,1,choice.id,index,index2)" :class="selected[index][index2]" v-for="(choice,index2) in topic.choiceList"><span @click.self="selectOne($event,1,choice.id,index,index2)">{{choice.orderno}}</span>{{choice.text}}<input :class="selected[index][index2]" type="radio" name="radio3"></label>
          <label v-if="topic.questionType==2" @click.self="selectOne($event,2,choice.id,index,index2)" :class="selected[index][index2]" v-for="(choice,index2) in topic.choiceList"><span @click.self="selectOne($event,2,choice.id,index,index2)">{{choice.orderno}}</span>{{choice.text}}<input :class="selected[index][index2]" type="checkbox"></label>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="footer">
<form action="paperCopy/toResultPage" method="get">
	<input type="hidden" name="paperCopyId" :value="paperCopyId">
	<input type="button" @click="submitForm" class="subtn" value="交 卷">
</form>
</div>
</div>
<script src="js/axios.js"></script>
<script src="js/vue.min.js"></script>
<script>
    let userId = `[[${session.me.id}]]`;
	let paperId = `[[${paperId}]]`
	var vm = new Vue({
		el: '#app',
		data: {
			createTime:'',
			score:0,
			showCreateTime:0,
			howlong:0,
			showHowlong:0,
			state:1,
			name:'11',
			list:[],
			selected:[],
			paperCopyId:112,
			userName:''
		},mounted:function(){
			
		},methods:{
			submitForm:function(){
				$(".subtn").attr("disabled",true).css("backgroundColor","gray");
				layer.msg("正在提交，请稍候",{time:3000},function(){
					document.querySelector(".footer form").submit();
				})
				
			},
			selectOne: function(event,type,id,index,index2){
				let arr = ['','','','','',''];
				let selected = 2;
				if(type==2){//多选题
					for(var a =0;a<this.selected[index].length;a++){
						arr[a] =(this.selected[index][a])
					}
				}
				
				if(this.selected[index][index2]===''){
					arr[index2] = "checked";
					selected = 1;
				}else{
					arr[index2] = "";
				}
				
				this.selected.splice(index,1,arr); 
				axios.post("choiceCopy/answer",{id: id,selected:selected}).then(res=>{
					
				})
			}
		}
	})
	function getList(){
		axios.post("paperCopy/createPaper",{paperId: paperId,userId: userId}).then(res=>{
			let data = res.data;
			vm.score = data.score;
			vm.name = data.name;
			vm.userName = data.userName;
			vm.createTime = dayjs(data.createTime);
			vm.showCreateTime = dayjs(data.createTime).format("HH:mm");
			vm.howlong = data.howlong;
			vm.list = data.list;
			vm.paperCopyId = data.paperCopyId;
			for (var i=0;i<data.list.length;i++) {
				//vm.selected[i] = [''];
				let qc = data.list[i];
				let cList = qc.choiceList;
				var arr = [];
				for(var j=0;j<cList.length;j++){
					let cc = cList[j];
					arr[j] = cc.selected==1?"checked":"";
				}
				vm.selected.splice(i,1,arr); 
			}
	   })
	}
	setInterval(function(){
		vm.showHowlong = vm.howlong - dayjs(getCurrentTime("yyyy-MM-dd HH:mm:ss")).diff(vm.createTime,"minute");
	},1000);
	getList();
</script>
  
</body>
</html>